<template>
  <Modal
    class="model"
    v-model="show"
    @on-cancel="handleCancel(false)"
    title="回访详细"
    draggable
    :mask-closable="false"
    width="80%"
  >
    <Row>
      <Col span="18">
        <div class="title">回访信息</div>
        <Divider />
        <Form
          :model="formItem"
          :rules="formRule"
          :label-width="118"
          ref="formItem"
          class="return-form"
        >
          <FormItem label="回访状态" required prop="radio">
            <RadioGroup v-model="formItem.radio" @on-change="handleChangeRadio">
              <Radio
                v-for="(method, index) in methodList"
                :key="index"
                :label="method.id"
                :disabled="+method.status === 0"
                >{{ method.name }}
              </Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="回访方式" required prop="radios">
            <RadioGroup v-model="formItem.radios">
              <Radio label="1">电话</Radio>
              <Radio label="2">微信</Radio>
              <Radio label="3">QQ</Radio>
              <Radio label="4">其他</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="回访内容" prop="textarea">
            <Input
              v-model="formItem.textarea"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入回访内容"
            ></Input>
          </FormItem>
          <FormItem label="患者标签" prop="tag">
            <Select v-model="formItem.tag" filterable multiple>
              <OptionGroup
                v-for="(item, index) in tagList"
                :key="index"
                :label="item.name"
              >
                <Option
                  v-for="(items, inum) in item.children"
                  :value="items.id"
                  :key="inum"
                  :disabled="+items.status === 0"
                >
                  {{ items.name }}</Option
                >
              </OptionGroup>
            </Select>
          </FormItem>
          <!-- <FormItem label="就诊类型" prop="select">
                    <Select v-model="formItem.select" disabled style="width:190px" clearable>
                        <Option v-for="(item, index) in typeList" :key="'type-' + index" :value="item.id">{{item.name}}
                        </Option>
                    </Select>
                </FormItem> -->
          <FormItem
            label="效果类型"
            prop="effect_type"
            v-if="!(is_vitiligo_not || is_first_initially)"
          >
            <RadioGroup v-model="formItem.effect_type" size="small">
              <Radio
                :label="item.id"
                v-for="item in effect_type_list"
                :key="item.id"
                :disabled="+item.status === 0"
                >{{ item.name }}</Radio
              >
            </RadioGroup>
          </FormItem>
          <FormItem label="风控类型" prop="risk_type">
            <RadioGroup
              v-model="formItem.risk_type"
              size="small"
              @on-change="changerisktype()"
            >
              <Radio
                :label="item.id"
                v-for="item in risk_type_list"
                :key="item.id"
                :disabled="+item.status === 0"
                >{{ item.name }}</Radio
              >
            </RadioGroup>
          </FormItem>
          <FormItem
            label="下次回访时间"
            prop="date"
            v-if="formItem.risk_type !== '50'"
          >
            <Input
              style="width:80px"
              v-model="time"
              @input="changeText($event)"
              type="number"
            />
            <span style="margin:0 10px">天后</span>
            <DatePicker
              type="datetime"
              placeholder="请输入回访时间"
              v-model="formItem.date"
              :options="dateOption"
              @input="changeTexts"
            ></DatePicker>
          </FormItem>
          <FormItem label="下次复诊时间" prop="date1">
            <Input
              style="width: 80px"
              v-model="visitTime"
              @input="changeTextS($event)"
              type="number"
            />
            <span style="margin:0 10px">天后</span>
            <DatePicker
              type="datetime"
              placeholder="请输入复诊时间"
              v-model="formItem.date1"
              :options="dateOption"
              @input="change"
              format="yyyy-MM-dd HH:mm:ss"
            ></DatePicker>
          </FormItem>
        </Form>
      </Col>
      <Col span="6" class="side-bg">
        <div class="basic">
          <h3>
            {{ itemData.name }} {{ itemData.gender_str }} {{ itemData.age }}岁
          </h3>
          <h4 class="b-phone">
            <span>手机号：{{ itemData.mobile }}</span>
            <span>诊疗号：{{ itemData.patient_card_id }}</span>
          </h4>
        </div>
        <div class="sky-screen">
          <row>
            <Col span="16">
              <DatePicker
                v-model="searchItem.date"
                @on-change="onSearchItem"
                clearable
                type="daterange"
                placeholder="回访日期"
              ></DatePicker>
            </Col>
            <Col span="8">
              <Select
                v-model="searchItem.select"
                placeholder="岗位选择"
                @on-change="onSearchItem"
              >
                <Option
                  v-for="(item, index) in postList"
                  :key="'post' + index"
                  :value="item.id"
                  :disabled="+item.status === 0"
                  >{{ item.name }}
                </Option>
              </Select>
            </Col>
          </row>
        </div>
        <Divider />
        <div class="side-message" v-if="itemList.length > 0">
          <Timeline>
            <template v-for="items in itemList">
              <TimelineItem v-if="items.data_type != 2">
                <p class="time">{{ items.current_callback_time_str }}</p>
                <p class="content">{{ items.content }}</p>
                <p class="consultant">
                  <span class="c-inr-right" v-if="items.profession_name">{{
                    items.profession_name
                  }}</span>
                  <span class="c-inr-right" v-if="items.member_name">{{
                    items.member_name
                  }}</span>
                  <Badge status="success" :text="items.callback_state" />
                  <span> &nbsp; </span>
                  <Badge
                    status="success"
                    color="orange"
                    :text="items.callback_way"
                  />
                </p>
              </TimelineItem>
            </template>
          </Timeline>
        </div>
        <div v-else style="height: 300px;text-align: center">暂无回访信息</div>
      </Col>
    </Row>
    <div slot="footer">
      <Button @click="handleCancel(false)">取消</Button>
      <Button
        type="primary"
        :loading="loading"
        :disabled="isDisable"
        @click="handleOk('formItem')"
        >确定</Button
      >
    </div>
  </Modal>
</template>
<script>
import { formatWithYear } from "@/utils/datetime";
import { CreateReturn, GetReturnItemList } from "@api/returnVisit";
import { PatientUpdataDetail } from "@/api/patient";
export default {
  data() {
    return {
      isDisable: false,
      visitTime: "",
      VisitTime: "",
      time: "",
      Time: "",
      TimeList: "",
      loading: false,
      show: false,
      searchItem: {
        date: [],
        select: "00",
      },
      formItem: {
        input: "",
        tag: [],
        // select: '',
        radio: "3",
        radios: "1",
        date: "",
        date1: "",
        textarea: "",
        effect_type: "",
        risk_type: "",
      },
      formRule: {
        textarea: [
          { required: true, message: "回访内容不能为空", trigger: "blur" },
        ],
        date: [{ required: true, message: "下次回访日期不可为空" }],
        effect_type: [
          { required: true, message: "请选择效果类型", trigger: "change" },
        ],
        risk_type: [
          { required: true, message: "请选择风控类型", trigger: "change" },
        ],
      },
      postList: [{ id: "00", name: "全部岗位" }],
      taglist: [],
      itemData: {},
      itemList: [],
      tagList: [],
      typeList: [],
      methodList: [],
      effect_type_list: [], // 效果类型列表
      risk_type_list: [], // 风控类型列表
      dateOption: {
        disabledDate(pick) {
          const curDate = new Date();
          curDate.setTime(curDate.getTime() - 3600 * 1000 * 24);
          let reVal = 0;
          if (pick < curDate) {
            reVal = 1;
          }
          return reVal;
        },
      },
      is_first_initially: false,
      is_vitiligo_not: false,
    };
  },
  methods: {
    changeTextS(e) {
      this.visitTime = e;
      let Current = new Date().getTime();
      let Return = e * 24 * 60 * 60 * 1000;
      this.VisitTime = Current + Return;
      let VisitTime = new Date(this.VisitTime);
      let y = VisitTime.getFullYear();
      let m = VisitTime.getMonth() + 1;
      let d = VisitTime.getDate();
      let h = VisitTime.getHours();
      let mm = VisitTime.getMinutes();
      let s = VisitTime.getSeconds();
      this.formItem.date1 =
        y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
    },
    changeText(e) {
      this.time = e;
      let CurrentDate = new Date().getTime();
      let ReturnDate = e * 24 * 60 * 60 * 1000;
      this.Time = ReturnDate + CurrentDate;
      this.format(this.Time);
    },
    format(data) {
      let time = new Date(data);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      this.formItem.date = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
    },
    handleShow(row, types, tags, status) {
      this.show = true;
      this.itemData = {};
      this.itemData = row;

      // this.formItem.select = this.filterId(row.outpatient_name, types);
      this.formItem.date = row.next_callback_time_str
        ? new Date(row.next_callback_time_str)
        : "";
      this.formItem.date1 = row.next_revisiting_time_str;
      this.formItem.data1 = formatWithYear(this.formItem.date1);
      this.getEditDetail(row.id, status);
      this.handleLoad(row);
    },
    handleChangeRadio(id) {
      let obj = this.methodList.filter((item) => item.id === id);
      if (obj && obj[0].name === "已到院") {
        this.formItem.textarea = "已到院";
      } else {
        this.formItem.textarea = "";
      }
    },
    getEditDetail(id, status = 3) {
      PatientUpdataDetail({ id, edit_type: status }).then((res) => {
        this.typeList = res.condition.outpatient_type_list;
        this.tagList = res.condition.tags_list;
        this.is_first_initially = res.is_first_initially;
        this.is_vitiligo_not = res.is_vitiligo_not;
        this.formItem.tag = res.tags_ids;
        this.methodList = res.condition.callback_status_list;
        this.effect_type_list = res.condition.effect_type_list;
        this.risk_type_list = res.condition.risk_type_list;
        let obj = res.condition.callback_status_list.filter(
          (item) => item.name === "正常回访"
        );
        this.formItem.radio = obj[0].id;
        this.formItem.date1 = res.next_revisiting_time || "";
        this.formItem.effect_type = res.effect_type_id || "";
        this.formItem.risk_type = res.risk_type_id || "";
        if (res.is_show_medical === 1 && res.is_show_customer === 0) {
          // 医助
          this.formItem.date = res.yz_next_callback_time;
        } else if (res.is_show_medical === 0 && res.is_show_customer === 1) {
          // 客服
          this.formItem.date = res.kf_next_callback_time;
        } else {
          this.formItem.date = "";
        }
        this.changerisktype();
      });
    },
    filterId(name, types) {
      let reVal = "";
      if (types && types.length > 0) {
        types.forEach((type) => {
          if (type.name === name) {
            reVal = type.id;
          }
        });
      }
      return reVal;
    },
    handleLoad(row) {
      const params = {
        patient_user_id: this.itemData.id,
        start_time:
          this.searchItem.date[0] && this.formDate(this.searchItem.date[0]),
        end_time:
          this.searchItem.date[1] && this.formDate(this.searchItem.date[1]),
        profession_id:
          this.searchItem.select === "00" ? "" : this.searchItem.select,
        page: 0,
        pageSize: 0,
      };
      GetReturnItemList(params)
        .then((res) => {
          this.itemList = res.list;
          if (this.postList.length === 1) {
            const postList = res.condition.permission_list;
            this.postList = this.postList.concat(postList);
          }
        })
        .catch(() => {});
    },
    handleCancel(val) {
      this.show = false;
      this.$refs["formItem"].resetFields();
      this.searchItem = {
        date: [],
        select: "00",
      };
      if (val) {
        this.$emit("updateShow", true);
      }
    },
    handleOk() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 5000);
      if (this.formItem.textarea === "") {
        this.isDisable = false;
      }
      if (this.formItem.risk_type !== "50") {
        if (this.formItem.date && this.formItem.date < new Date()) {
          this.$Message.warning("下次回访时间已过期，请重新选择！");
          this.isDisable = false;
          return;
        }
      } else {
        this.formItem.date = "";
      }
      if (this.formItem.date1 && this.formItem.date1 < new Date()) {
        this.$Message.warning("下次复诊时间已过期，请重新选择！");
        this.isDisable = false;
        return;
      }
      const params = {
        patient_id: this.itemData.id,
        callback_state_id: this.formItem.radio,
        callback_way_id: this.formItem.radios,
        content: this.formItem.textarea,
        next_callback_time: this.formItem.date,
        next_fuzhen_time: this.formItem.date1,
        // outpatient_type_id: this.formItem.select,
        tags_ids: this.formItem.tag.join(","),
        effect_type: this.formItem.effect_type,
        risk_type: this.formItem.risk_type,
        is_vitiligo_not: this.is_vitiligo_not,
        is_first_initially: this.is_first_initially,
      };
      CreateReturn(params)
        .then((res) => {
          this.$Message.success(" 提交回访成功");
          this.loading = false;
          this.handleCancel(true);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onSearchItem() {
      this.handleLoad();
    },
    formDate(date) {
      return formatWithYear(date, "-");
    },
    changeTexts(e) {
      let CurrentDate = new Date().getTime();
      let ReturnDate = new Date(e).getTime();
      let Time = ReturnDate - CurrentDate;
      let day = Math.ceil(Time / 1000 / 60 / 60 / 24);
      this.time = day;
    },
    change(e) {
      let CurrentDate = new Date().getTime();
      let ReturnDate = new Date(e).getTime();
      let Time = ReturnDate - CurrentDate;
      let day = Math.ceil(Time / 1000 / 60 / 60 / 24);
      this.visitTime = day;
    },
    changerisktype() {
      if (this.formItem.risk_type !== "50") {
        this.formRule.date[0].required = true;
      } else {
        this.formRule.date[0].required = false;
      }
    },
  },
  filters: {
    handleState(val = "") {
      let reVal = "";
      if (val) {
        const value = parseInt(val, 10);
        if (value === 1) {
          reVal = "未接通";
        } else if (value === 2) {
          reVal = "微信拉黑";
        } else if (value === 3) {
          reVal = "正常回访";
        } else if (value === 4) {
          reVal = "已到院";
        }
      }
      return reVal;
    },
  },
};
</script>
<style scoped lang="less">
.time {
  font-size: 14px;
  font-weight: bold;
}

.content {
  padding: 10px 0;
}

.consultant {
  color: #9ea7b4;
}

.c-inr {
  margin: 0 10px;
}

.c-inr-right {
  margin-right: 10px;
}

.b-phone {
  line-height: 26px;
  font-size: 12px;
}

h4 span {
  margin-left: 5px;
}

.side-bg {
  background: #f2f2f2;
  padding: 24px !important;
  height: 570px;
  max-height: 570px;
}

.return-form {
  padding: 24px;
}

.title {
  font-weight: bold;
  font-size: 16px;
  padding: 24px 0 0 24px;
}

.sky-screen {
  margin-top: 16px;
}

.model .ivu-modal-body {
  padding: 0px;
}
/deep/.ivu-modal {
  top: 37px !important;
}
.side-message {
  max-height: 370px;
  overflow-y: auto;
}

/*/deep/.ivu-modal .side-message {*/
/*    /deep/.ivu-select-dropdown {*/
/*        position: fixed !important;*/
/*        right: 120px;*/
/*        top: 322px !important;*/
/*        left: inherit !important;*/
/*    }*/
/*}*/
</style>
